<style lang="less">
  .share {
    padding: 0 40rpx;
    background: #fff;
    .thumb-image {
      margin-top: 200rpx;
      display: block;
      width: 170rpx;
      height: 170rpx;
    }
    .share-text {
      display: block;
      margin-top: 48rpx;
      width: 100%;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.65);
    }
    .share-pl {
      color: rgba(0, 0, 0, 0.3);
    }
    .handle-bar {
      .hanld-btn {
        padding: 0;
        margin-bottom: 24rpx;
        outline: none;
        width: 670rpx;
        height: 72rpx;
        background: var(--theme);
        color: #fff;
        border-radius: 36rpx;
        font-size: 28rpx;
        &::after {
          content: none;
        }
      }
    }
  }
</style>

<template>
  <view class="share fixed-view flex flex-col">
		<!-- 返回按钮 -->
		<back-btn @click="backHome" />
    <!-- 缩略图 -->
    <image class="thumb-image" :src="localUrl" mode="aspectFill" />
    <!-- 分享文本 -->
    <textarea class="share-text flex-1" v-model="title" placeholder="这一刻想分享点什么~" placeholder-class="share-pl" />
    <!-- 底部操作栏 -->
		<view class="handle-bar flex just-center align-center" :class="isIphoneX ? 'iphoneX-bottom' : ''">
      <button class="hanld-btn flex just-center align-center" open-type="share">分享</button>
    </view>
  </view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import systemMixin from '@/mixin/system'
import { funcSync } from '@/utils/index'
import BackBtn from '@/biz-components/back-btn'
const { mapState, mapMutations } = createNamespacedHelpers('app')
/**
 * 分享页
 */
export default {
  name: 'Share',
	mixins: [systemMixin],
  components: {
    BackBtn
  },
  data() {
    return {
      defaultTitle: '这一刻，分享我的喜悦',
      title: '',
      path: '/pages/home',
    }
  },
  computed: {
    ...mapState(['localUrl']),
  },
  methods: {
    // 返回首页
		async backHome() {
			const { confirm } = await funcSync(uni.showModal, { content: '是否放弃分享?', cancelText: '不放弃', cancelColor: '#999999', confirmText: '放弃', confirmColor: '#FF597A' })
			// 确认返回
			if (confirm) {
				uni.navigateBack({ delta: 1 })
			}
		},
  },
  onShareAppMessage() {
    return {
      title: this.title || this.defaultTitle,
      path: this.path,
      imageUrl: this.localUrl
    }
  },
  onShareTimeline() {
    return {
      title: this.title || this.defaultTitle,
      path: this.path,
      imageUrl: this.localUrl
    }
  },
  created() {
    uni.showShareMenu({ menus: ['shareAppMessage', 'shareTimeline'] })
  },
  mounted() {
    uni.showToast({ icon: 'none',	title: '已保存到您的相册' })
  }
}
</script>